<template>
  <div class="app-container">
    <!-- 认证遮罩 -->
    <div v-if="!isAuthenticated" class="auth-mask">
      <div class="auth-dialog">
        <h3 class="auth-title">FLV 视频播放器</h3>
        
        <form @submit.prevent="handleAuth" class="auth-form">
          <input
            v-model="password"
            type="password"
            class="auth-input"
            placeholder="请输入验证码"
            autocomplete="off"
            ref="passwordInput"
          />
          <button type="submit" class="auth-button">验证</button>
        </form>
        
        <p v-if="errorMessage" class="error-text">{{ errorMessage }}</p>
      </div>
    </div>

    <!-- 主内容 -->
    <div v-show="isAuthenticated">
      <header class="header">
        <h1>FLV 视频播放器</h1>
        <div class="import-section">
          <input 
            type="file" 
            ref="fileInput" 
            accept=".csv"
            @change="handleFileImport"
            style="display: none"
          />
          <button @click="$refs.fileInput.click()" class="import-btn">
            <span class="icon">📁</span>
            导入 CSV
          </button>
          <button @click="showAddUrlDialog = true" class="import-btn add-url-btn">
            <span class="icon">➕</span>
            添加流地址
          </button>
          <span v-if="videoList.length > 0" class="video-count">
            已加载 {{ videoList.length }} 个视频
          </span>
        </div>
      </header>

      <div class="content">
        <div v-if="videoList.length === 0" class="empty-state">
          <div class="empty-icon">📹</div>
          <p>暂无视频</p>
          <p class="empty-hint">请点击上方"导入 CSV"按钮导入视频流地址</p>
          <div class="csv-format">
            <p><strong>CSV 格式示例：</strong></p>
            <pre>id,name,url
1,视频名称1,http://example.com/video1.flv
2,视频名称2,http://example.com/video2.m3u8</pre>
          </div>
        </div>

        <div v-else class="main-layout">
          <!-- 左侧导航栏 -->
          <aside class="sidebar">
            <div class="sidebar-header">
              <h3>视频列表</h3>
              <span class="total-badge">共 {{ videoList.length }} 个</span>
            </div>
            
            <div class="sidebar-stats">
              <div class="stat-item">
                <span class="stat-label">总页数:</span>
                <span class="stat-value">{{ totalPages }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">当前页:</span>
                <span class="stat-value">{{ currentPage }}/{{ totalPages }}</span>
              </div>
            </div>

            <div class="page-list">
              <div 
                v-for="page in totalPages" 
                :key="page"
                :class="['page-item', { active: currentPage === page }]"
                @click="changePage(page)"
              >
                <div class="page-header">
                  <span class="page-number">第 {{ page }} 页</span>
                  <span class="page-count">{{ getPageVideoCount(page) }} 个视频</span>
                </div>
                <div class="page-videos">
                  <div 
                    v-for="(video, idx) in getPageVideos(page)" 
                    :key="video.id"
                    class="video-item-mini"
                  >
                    <span class="video-index">{{ (page - 1) * videosPerPage + idx + 1 }}.</span>
                    <span class="video-name-mini" :title="video.name">{{ video.name }}</span>
                  </div>
                </div>
              </div>
            </div>
          </aside>

          <!-- 右侧内容区 -->
          <main class="main-content">
            <div class="control-bar">
              <div class="info-section">
                <span class="page-info">第 {{ currentPage }}/{{ totalPages }} 页</span>
                <span class="playing-count">
                  播放中: {{ activePlayersCount }} / {{ videosPerPage }}
                </span>
              </div>
              <div class="action-section">
                <button 
                  @click="playAllCurrentPage" 
                  class="control-btn-global play-all"
                  :disabled="activePlayersCount === currentPageVideos.length"
                >
                  ▶️ 播放本页全部
                </button>
                <button @click="stopAllVideos" class="control-btn-global">
                  ⏹️ 停止全部
                </button>
              </div>
            </div>

            <div class="video-grid-fixed">
              <VideoPlayer
                v-for="video in currentPageVideos"
                :key="video.id"
                :video="video"
                :max-concurrent="videosPerPage"
                :ref="el => setVideoPlayerRef(video.id, el)"
                @remove="removeVideo"
                @play-request="handlePlayRequest"
                @play-started="handlePlayStarted"
                @play-stopped="handlePlayStopped"
              />
              
              <!-- 填充空白位置 -->
              <div 
                v-for="n in emptySlots" 
                :key="'empty-' + n"
                class="video-placeholder"
              >
                <div class="placeholder-content">
                  <span class="placeholder-icon">📹</span>
                  <span class="placeholder-text">空位 {{ currentPageVideos.length + n }}</span>
                </div>
              </div>
            </div>

            <div class="pagination-controls">
              <button 
                @click="prevPage" 
                :disabled="currentPage === 1"
                class="pagination-btn"
              >
                ← 上一页
              </button>
              <span class="page-indicator">
                {{ currentPage }} / {{ totalPages }}
              </span>
              <button 
                @click="nextPage" 
                :disabled="currentPage === totalPages"
                class="pagination-btn"
              >
                下一页 →
              </button>
            </div>
          </main>
        </div>
      </div>

      <!-- 添加流地址弹窗 -->
      <div v-if="showAddUrlDialog" class="dialog-overlay" @click="closeAddUrlDialog">
        <div class="dialog-content" @click.stop>
          <div class="dialog-header">
            <h3>添加视频流地址</h3>
            <button @click="closeAddUrlDialog" class="dialog-close">×</button>
          </div>
          
          <div class="dialog-body">
            <div class="form-group">
              <label class="form-label">视频名称</label>
              <input 
                v-model="newVideoName" 
                type="text" 
                class="form-input"
                placeholder="请输入视频名称"
                @keyup.enter="focusUrlInput"
              />
            </div>
            
            <div class="form-group">
              <label class="form-label">视频流地址</label>
              <input 
                v-model="newVideoUrl" 
                type="text" 
                class="form-input"
                placeholder="请输入 FLV/HLS/M3U8 流地址"
                ref="urlInput"
                @keyup.enter="addManualVideo"
              />
              <p class="form-hint">支持格式：FLV、HLS、M3U8</p>
            </div>
          </div>
          
          <div class="dialog-footer">
            <button @click="closeAddUrlDialog" class="dialog-btn cancel-btn">取消</button>
            <button @click="addManualVideo" class="dialog-btn confirm-btn">添加</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import VideoPlayer from './components/VideoPlayer.vue'
import Papa from 'papaparse'

const fileInput = ref(null)
const videoList = ref([])
const isAuthenticated = ref(false)
const password = ref('')
const errorMessage = ref('')
const passwordInput = ref(null)
const videosPerPage = 6 // 固定每页6个视频
const currentPage = ref(1) // 当前页码
const activePlayers = ref(new Set()) // 记录正在播放的视频ID
const activePlayersCount = ref(0)
const videoPlayerRefs = ref(new Map()) // 存储视频播放器引用

// 手动添加视频相关
const showAddUrlDialog = ref(false)
const newVideoName = ref('')
const newVideoUrl = ref('')
const urlInput = ref(null)

// 计算总页数
const totalPages = computed(() => {
  return Math.ceil(videoList.value.length / videosPerPage)
})

// 当前页的视频列表
const currentPageVideos = computed(() => {
  const start = (currentPage.value - 1) * videosPerPage
  const end = start + videosPerPage
  return videoList.value.slice(start, end)
})

// 空白占位符数量
const emptySlots = computed(() => {
  const count = currentPageVideos.value.length
  return count < videosPerPage ? videosPerPage - count : 0
})

// 认证功能
onMounted(() => {
  checkAuthentication()
})

const checkAuthentication = () => {
  // 检查 sessionStorage 中是否已认证
  const authenticated = sessionStorage.getItem('authenticated')
  if (authenticated === 'true') {
    isAuthenticated.value = true
  } else {
    // 延迟聚焦输入框
    setTimeout(() => {
      if (passwordInput.value) {
        passwordInput.value.focus()
      }
    }, 300)
  }
}

const handleAuth = () => {
  if (!password.value) {
    errorMessage.value = '请输入验证码'
    return
  }
  
  if (password.value === 'axxt1234') {
    // 密码正确
    isAuthenticated.value = true
    sessionStorage.setItem('authenticated', 'true')
    errorMessage.value = ''
    password.value = ''
  } else {
    // 密码错误
    errorMessage.value = '验证码错误，请重新输入'
    password.value = ''
    setTimeout(() => {
      if (passwordInput.value) {
        passwordInput.value.focus()
      }
    }, 100)
  }
}

const handleFileImport = (event) => {
  const file = event.target.files[0]
  if (!file) return

  Papa.parse(file, {
    header: true,
    skipEmptyLines: true,
    complete: (results) => {
      if (results.data && results.data.length > 0) {
        videoList.value = results.data.map(item => ({
          id: item.id || Math.random().toString(36).substr(2, 9),
          name: item.name || '未命名视频',
          url: item.url || ''
        })).filter(item => item.url)
        
        console.log('导入成功:', videoList.value.length, '个视频')
      }
    },
    error: (error) => {
      console.error('CSV 解析错误:', error)
      alert('CSV 文件解析失败，请检查文件格式')
    }
  })

  // 重置 input 以允许重复选择同一文件
  event.target.value = ''
}

// 设置视频播放器引用
const setVideoPlayerRef = (videoId, el) => {
  if (el) {
    videoPlayerRefs.value.set(videoId, el)
  } else {
    videoPlayerRefs.value.delete(videoId)
  }
}

// 获取指定页的视频列表
const getPageVideos = (page) => {
  const start = (page - 1) * videosPerPage
  const end = start + videosPerPage
  return videoList.value.slice(start, end)
}

// 获取指定页的视频数量
const getPageVideoCount = (page) => {
  return getPageVideos(page).length
}

// 切换页面
const changePage = (page) => {
  if (page === currentPage.value) return
  
  // 停止所有视频
  stopAllVideos()
  
  // 切换页面
  currentPage.value = page
}

// 上一页
const prevPage = () => {
  if (currentPage.value > 1) {
    changePage(currentPage.value - 1)
  }
}

// 下一页
const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    changePage(currentPage.value + 1)
  }
}

// 播放本页全部视频
const playAllCurrentPage = () => {
  // 触发当前页所有视频播放
  currentPageVideos.value.forEach(video => {
    const playerRef = videoPlayerRefs.value.get(video.id)
    if (playerRef && playerRef.startPlay) {
      playerRef.startPlay()
    }
  })
}

const removeVideo = (id) => {
  activePlayers.value.delete(id)
  activePlayersCount.value = activePlayers.value.size
  videoList.value = videoList.value.filter(v => v.id !== id)
  
  // 如果当前页没有视频了，跳转到上一页
  if (currentPageVideos.value.length === 0 && currentPage.value > 1) {
    currentPage.value--
  }
}

// 处理播放请求
const handlePlayRequest = (videoId) => {
  // 当前页固定6个，允许全部播放
  return true
}

// 播放开始
const handlePlayStarted = (videoId) => {
  activePlayers.value.add(videoId)
  activePlayersCount.value = activePlayers.value.size
}

// 播放停止
const handlePlayStopped = (videoId) => {
  activePlayers.value.delete(videoId)
  activePlayersCount.value = activePlayers.value.size
}

// 停止所有视频
const stopAllVideos = () => {
  // 触发全局停止事件
  window.dispatchEvent(new CustomEvent('stop-all-videos'))
  activePlayers.value.clear()
  activePlayersCount.value = 0
}

// 聚焦到URL输入框
const focusUrlInput = () => {
  setTimeout(() => {
    if (urlInput.value) {
      urlInput.value.focus()
    }
  }, 100)
}

// 关闭添加URL对话框
const closeAddUrlDialog = () => {
  showAddUrlDialog.value = false
  newVideoName.value = ''
  newVideoUrl.value = ''
}

// 添加手动输入的视频
const addManualVideo = () => {
  const name = newVideoName.value.trim()
  const url = newVideoUrl.value.trim()
  
  if (!name) {
    alert('请输入视频名称')
    return
  }
  
  if (!url) {
    alert('请输入视频流地址')
    return
  }
  
  // 简单验证URL格式
  if (!url.startsWith('http://') && !url.startsWith('https://') && !url.startsWith('rtmp://')) {
    alert('请输入有效的视频流地址（需要以 http:// 或 https:// 开头）')
    return
  }
  
  // 生成唯一ID
  const id = Date.now().toString() + Math.random().toString(36).substr(2, 9)
  
  // 添加到视频列表
  videoList.value.push({
    id,
    name,
    url
  })
  
  // 关闭对话框
  closeAddUrlDialog()
  
  // 跳转到最后一页（新添加的视频所在页）
  currentPage.value = totalPages.value
}
</script>

<style scoped>
.app-container {
  min-height: 100vh;
  background: #f5f7fa;
  position: relative;
}

/* 认证页面样式 */
.auth-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}

.auth-dialog {
  background: #ffffff;
  border-radius: 8px;
  padding: 40px 50px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  animation: slideIn 0.4s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.auth-title {
  font-size: 24px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 30px 0;
  text-align: center;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.auth-input {
  width: 100%;
  padding: 14px 18px;
  background: #ffffff;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  font-size: 15px;
  color: #333;
  outline: none;
  transition: all 0.3s;
  box-sizing: border-box;
}

.auth-input::placeholder {
  color: #c0c4cc;
}

.auth-input:focus {
  background: #ffffff;
  border-color: #409eff;
  box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.1);
}

.auth-button {
  width: 100%;
  padding: 14px;
  background: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  box-sizing: border-box;
}

.auth-button:hover {
  background: #66b1ff;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.auth-button:active {
  transform: translateY(1px);
}

.error-text {
  color: #ff6b6b;
  font-size: 13px;
  text-align: center;
  margin: 10px 0 0 0;
  animation: shake 0.5s;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  75% { transform: translateX(10px); }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .auth-dialog {
    padding: 30px 25px;
    max-width: 90%;
  }
}

.header {
  background: white;
  padding: 20px 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.header h1 {
  font-size: 24px;
  font-weight: 600;
  color: #1a1a1a;
}

.import-section {
  display: flex;
  align-items: center;
  gap: 15px;
}

.import-btn {
  padding: 10px 20px;
  background: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.3s;
}

.import-btn:hover {
  background: #66b1ff;
}

.import-btn .icon {
  font-size: 14px;
}

.add-url-btn {
  background: #67c23a;
}

.add-url-btn:hover {
  background: #85ce61;
}

.video-count {
  color: #606266;
  font-size: 14px;
}

.content {
  padding: 0;
  height: calc(100vh - 80px);
}

.main-layout {
  display: flex;
  height: 100%;
  overflow: hidden;
}

/* 左侧导航栏 */
.sidebar {
  width: 300px;
  background: white;
  border-right: 1px solid #e4e7ed;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sidebar-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.total-badge {
  background: #ecf5ff;
  color: #409eff;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.sidebar-stats {
  padding: 15px 20px;
  background: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.stat-item:last-child {
  margin-bottom: 0;
}

.stat-label {
  font-size: 13px;
  color: #909399;
}

.stat-value {
  font-size: 13px;
  color: #303133;
  font-weight: 600;
}

.page-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}

.page-item {
  background: white;
  border: 2px solid #e4e7ed;
  border-radius: 8px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.3s;
}

.page-item:hover {
  border-color: #409eff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.15);
}

.page-item.active {
  border-color: #409eff;
  background: #ecf5ff;
}

.page-header {
  padding: 12px 15px;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-number {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.page-item.active .page-number {
  color: #409eff;
}

.page-count {
  font-size: 12px;
  color: #909399;
}

.page-videos {
  padding: 10px 15px;
  max-height: 200px;
  overflow-y: auto;
}

.video-item-mini {
  display: flex;
  align-items: center;
  padding: 6px 0;
  font-size: 12px;
  color: #606266;
  border-bottom: 1px dashed #f0f0f0;
}

.video-item-mini:last-child {
  border-bottom: none;
}

.video-index {
  color: #909399;
  margin-right: 8px;
  min-width: 24px;
}

.video-name-mini {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 右侧主内容区 */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #f5f7fa;
}

.control-bar {
  background: white;
  padding: 15px 20px;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  flex-shrink: 0;
}

.info-section {
  display: flex;
  gap: 20px;
  align-items: center;
}

.page-info {
  font-size: 14px;
  color: #303133;
  font-weight: 600;
}

.playing-count {
  font-size: 14px;
  color: #409eff;
  font-weight: 600;
  padding: 4px 12px;
  background: #ecf5ff;
  border-radius: 4px;
}

.action-section {
  display: flex;
  gap: 15px;
  align-items: center;
}

.control-btn-global {
  padding: 8px 16px;
  background: #f56c6c;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.control-btn-global:hover {
  background: #f78989;
}

.control-btn-global:disabled {
  background: #c0c4cc;
  cursor: not-allowed;
}

.control-btn-global.play-all {
  background: #67c23a;
}

.control-btn-global.play-all:hover:not(:disabled) {
  background: #85ce61;
}

/* 分页控制 */
.pagination-controls {
  padding: 15px 20px;
  background: white;
  border-top: 1px solid #e4e7ed;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.pagination-btn {
  padding: 8px 20px;
  background: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.pagination-btn:hover:not(:disabled) {
  background: #66b1ff;
}

.pagination-btn:disabled {
  background: #c0c4cc;
  cursor: not-allowed;
}

.page-indicator {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  min-width: 80px;
  text-align: center;
}

/* 视频网格 - 固定6个窗口 */
.video-grid-fixed {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 20px;
  align-content: start;
}

.video-placeholder {
  background: white;
  border: 2px dashed #dcdfe6;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  transition: all 0.3s;
}

.video-placeholder:hover {
  border-color: #c0c4cc;
  background: #f5f7fa;
}

.placeholder-content {
  text-align: center;
  color: #c0c4cc;
}

.placeholder-icon {
  font-size: 48px;
  display: block;
  margin-bottom: 10px;
  opacity: 0.5;
}

.placeholder-text {
  font-size: 14px;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #909399;
}

.empty-icon {
  font-size: 80px;
  margin-bottom: 20px;
}

.empty-state p {
  font-size: 16px;
  margin-bottom: 10px;
}

.empty-hint {
  font-size: 14px;
  color: #c0c4cc;
}

.csv-format {
  margin-top: 30px;
  display: inline-block;
  text-align: left;
}

.csv-format p {
  margin-bottom: 10px;
  color: #606266;
}

.csv-format pre {
  background: #f4f4f5;
  padding: 15px;
  border-radius: 4px;
  font-size: 13px;
  color: #303133;
  border: 1px solid #e4e7ed;
}

/* 弹窗样式 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.3s;
}

.dialog-content {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dialog-header {
  padding: 20px 25px;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dialog-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.dialog-close {
  background: none;
  border: none;
  font-size: 28px;
  color: #909399;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.3s;
}

.dialog-close:hover {
  background: #f5f7fa;
  color: #303133;
}

.dialog-body {
  padding: 25px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #606266;
}

.form-input {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  color: #606266;
  outline: none;
  transition: border-color 0.3s;
  box-sizing: border-box;
}

.form-input::placeholder {
  color: #c0c4cc;
}

.form-input:focus {
  border-color: #409eff;
}

.form-hint {
  margin: 8px 0 0 0;
  font-size: 12px;
  color: #909399;
}

.dialog-footer {
  padding: 15px 25px;
  border-top: 1px solid #e4e7ed;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.dialog-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.cancel-btn {
  background: #f5f7fa;
  color: #606266;
}

.cancel-btn:hover {
  background: #e4e7ed;
}

.confirm-btn {
  background: #409eff;
  color: white;
}

.confirm-btn:hover {
  background: #66b1ff;
}

/* 响应式调整 */
@media (max-width: 1400px) {
  .video-grid-fixed {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .main-layout {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
    max-height: 200px;
  }
  
  .video-grid-fixed {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  
  .header {
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>

